<template>
  <div>
    <section class="company-box">
      <h6>公司信息</h6>
      <apply-item leftText="公司名称" :onErrorTips="companyErrText">
        <input type="text" placeholder="请输入公司名称" slot="middledom" maxlength="30" @blur="onBlur('company')" v-model="applyForm.companyName" v-inputDelete>
      </apply-item>
      <apply-item leftText="商标名称" :onErrorTips="titleErrText">
        <input type="text" placeholder="请输入商标名称" slot="middledom" maxlength="30" @blur="onBlur('title')" v-model="applyForm.title" v-inputDelete>
      </apply-item>
      <apply-item leftText="企业法人" :onErrorTips="farenErrText">
        <input type="text" placeholder="请输入企业法人" slot="middledom" maxlength="15" @blur="onBlur('faren')" @input="inputName" v-model="applyForm.faren">
      </apply-item>
    </section>
    <section class="middle-block">
      <apply-item leftText="公司网址" :onErrorTips="homepageErrText">
        <input type="text" placeholder="请输入公司网址" slot="middledom" maxlength="30" @blur="onBlur('homepage')" v-model="applyForm.homepage">
      </apply-item>
      <apply-item leftText="公司地址" :onErrorTips="addressErrText">
        <input type="text" placeholder="请输入公司地址" slot="middledom" maxlength="140" @blur="onBlur('address')" @input="inputAddress" v-model="applyForm.address" v-inputDelete>
      </apply-item>
    </section>
    <section class="company-box">
      <h6>详细信息</h6>
      <p>根据申请需要，请按照提示准确的填写下列列表信息。</p>
      <apply-item leftText="成立日期" :rightArrow="true" @click.native="showPicker=true">
        <span slot="middledom">{{applyForm.founding_time}}</span>
      </apply-item>
      <apply-item leftText="注册资金" companyText="万元" :onErrorTips="registeredErrText">
        <input type="tel" placeholder="请输入数字" slot="middledom" maxlength="10" @blur="onBlur('registered_fund')" @input="inputNum('registered')" v-model="applyForm.registered_fund">
      </apply-item>
      <apply-item leftText="固定资产" companyText="万元" :onErrorTips="fixedErrText">
        <input type="tel" placeholder="请输入数字" slot="middledom" maxlength="10" @blur="onBlur('fixed_assets')" @input="inputNum('fixed')" v-model="applyForm.fixed_assets" v-inputBlur>
      </apply-item>
    </section>
    <section class="middle-block">
      <apply-item leftText="发明专利" companyText="项" :onErrorTips="inventErrText">
        <input type="tel" placeholder="请输入数字（若无请填0）" slot="middledom" maxlength="10" @blur="onBlur('invent_patent')" @input="inputNum('invent')" v-model="applyForm.invent_patent" v-inputBlur>
      </apply-item>
      <apply-item leftText="外观设计专利" companyText="项" :onErrorTips="designErrText">
        <input type="tel" placeholder="请输入数字（若无请填0）" slot="middledom" maxlength="10" @blur="onBlur('design_patent')" @input="inputNum('design')" v-model="applyForm.design_patent" v-inputBlur>
      </apply-item>
      <apply-item leftText="实用型专利" companyText="项" :onErrorTips="practicalErrText">
        <input type="tel" placeholder="请输入数字（若无请填0）" slot="middledom" maxlength="10" @blur="onBlur('practical_patent')" @input="inputNum('practical')" v-model="applyForm.practical_patent" v-inputBlur>
      </apply-item>
    </section>
    <div class="date-time-dome">
      <picker ref="datePicker" v-model="showPicker" :data-items="items" @change="onDateChange">
        <div class="top-content border-bottom-1px" slot="top-content">
          <span class="picker-cancel" @click="showPicker=false">取消</span>
          <span class="picker-title">设置成立日期</span>
          <span class="picker-ok" @click="selectionDate">完成</span>
        </div>
      </picker>
    </div>
  </div>
</template>
<script>
import ApplyItem from './ApplyItem'
import Picker from 'vue-3d-picker'
import { isvalidWebsite } from '../../../common/validate'
import { nameRule, addressRule, numRule } from '../../../common/inputRule'
export default {
  components: {
    ApplyItem,
    Picker
  },
  data() {
    let generateYearData = () => {
      let thisYear = new Date().getFullYear()
      let result = [],
        i = thisYear - 100,
        end = thisYear + 1;
      for (; i < end; i++) {
        result.unshift({
          value: i
        })
      }
      return result
    }
    return {
      showPicker: false,
      // picker 所需参数
      items: [
        {
          values: generateYearData(),
        }, {
          values: [],
        }, {
          values: []
        }
      ],
      // 假设每月天数
      normalMaxDays: 31,
      // 当月天数
      dayDate: [],
      // 当年实时月
      monthDate: [],
      // 实时月份
      realMonth: null,
      // 切换到的年份
      currentYear: null,
      // 切换到的月份
      currentMonth: null,
      // 表单所需参数 参数名根据接口设定
      applyForm: {
        companyName: null,
        title: null,
        faren: null,
        homepage: null,
        address: null,
        founding_time: '设置成立日期',
        registered_fund: null,
        fixed_assets: null,
        invent_patent: null,
        design_patent: null,
        practical_patent: null
      },
      // 相对应的错误提示
      companyErrText: '',
      titleErrText: '',
      farenErrText: '',
      homepageErrText: '',
      addressErrText: '',
      registeredErrText: '',
      fixedErrText: '',
      inventErrText: '',
      designErrText: '',
      practicalErrText: '',
    }
  },
  watch: {
    currentYear(newVal) {
      if (newVal) {
        this.items[2].values = this.dayDate
        this.items[1].values = this.monthDate
      }
    },
    currentMonth(newVal) {
      if (newVal) {
        this.items[2].values = this.dayDate
      }
    }
  },
  mounted() {
    this.judgeMonth()
    // 判断是否刷新
    if (window.sessionStorage.getItem('applyForm')) {
      let formData = JSON.parse(window.sessionStorage.getItem('applyForm'))
      this.applyForm.companyName = formData.companyName
      this.applyForm.title = formData.title
      this.applyForm.faren = formData.faren
      this.applyForm.homepage = formData.homepage
      this.applyForm.address = formData.address
      this.applyForm.founding_time = formData.founding_time
      this.applyForm.registered_fund = formData.registered_fund
      this.applyForm.fixed_assets = formData.fixed_assets
      this.applyForm.invent_patent = formData.invent_patent
      this.applyForm.design_patent = formData.design_patent
      this.applyForm.practical_patent = formData.practical_patent
    }
    this.getCertificate()
  },
  methods: {
    next() {
      if (!this.applyForm.companyName) {
        this.companyErrText = '必填项'
        this.$emit('onErrShow', true)
        return
      }
      if (!this.applyForm.title) {
        this.titleErrText = '必填项'
        this.$emit('onErrShow', true)
        return
      }
      if (!this.applyForm.faren) {
        this.farenErrText = '必填项'
        this.$emit('onErrShow', true)
        return
      }
      if (!this.applyForm.homepage) {
        this.homepageErrText = '必填项'
        this.$emit('onErrShow', true)
        return
      }
      if (!this.applyForm.address) {
        this.addressErrText = '必填项'
        this.$emit('onErrShow', true)
        return
      }
      if (this.applyForm.founding_time == '设置成立日期') {
        this.$emit('onErrShow', true)
        return
      }
      if (!this.applyForm.registered_fund) {
        this.registeredErrText = '必填项'
        this.$emit('onErrShow', true)
        return
      }
      if (!this.applyForm.fixed_assets) {
        this.fixedErrText = '必填项'
        this.$emit('onErrShow', true)
        return
      }
      if (!this.applyForm.invent_patent) {
        this.inventErrText = '必填项'
        this.$emit('onErrShow', true)
        return
      }
      if (!this.applyForm.design_patent) {
        this.designErrText = '必填项'
        this.$emit('onErrShow', true)
        return
      }
      if (!this.applyForm.practical_patent) {
        this.practicalErrText = '必填项'
        this.$emit('onErrShow', true)
        return
      }
      // 点击下一步， 将第一页内容存入sessionStorage
      window.sessionStorage.setItem('applyForm', JSON.stringify(this.applyForm))
      this.$emit('onStep', 2)
    },
    // 校验
    onBlur(e) {
      if (e == 'company') {
        if (!this.applyForm.companyName) {
          this.companyErrText = '必填项'
        } else {
          this.companyErrText = ''
        }
      }
      if (e == 'title') {
        if (!this.applyForm.title) {
          this.titleErrText = '必填项'
        } else {
          this.titleErrText = ''
        }
      }
      if (e == 'faren') {
        if (!this.applyForm.faren) {
          this.farenErrText = '必填项'
        } else {
          this.farenErrText = ''
        }
      }
      if (e == 'homepage') {
        if (!this.applyForm.homepage) {
          this.homepageErrText = '必填项'
          return
        }
        if (!isvalidWebsite(this.applyForm.homepage)) {
          this.homepageErrText = '网址有误'
          return
        } else {
          this.homepageErrText = ''
        }
      }
      if (e == 'address') {
        if (!this.applyForm.address) {
          this.addressErrText = '必填项'
        } else {
          this.addressErrText = ''
        }
      }
      if (e == 'registered_fund') {
        if (!this.applyForm.registered_fund) {
          this.registeredErrText = '必填项'
        } else {
          this.registeredErrText = ''
        }
      }
      if (e == 'fixed_assets') {
        if (!this.applyForm.fixed_assets) {
          this.fixedErrText = '必填项'
        } else {
          this.fixedErrText = ''
        }
      }
      if (e == 'invent_patent') {
        if (!this.applyForm.invent_patent) {
          this.inventErrText = '必填项'
        } else {
          this.inventErrText = ''
        }
      }
      if (e == 'design_patent') {
        if (!this.applyForm.design_patent) {
          this.designErrText = '必填项'
        } else {
          this.designErrText = ''
        }
      }
      if (e == 'practical_patent') {
        if (!this.applyForm.practical_patent) {
          this.practicalErrText = '必填项'
        } else {
          this.practicalErrText = ''
        }
      }
    },
    // 获取详情
    getCertificate() {
      if (this.$route.params.itemid === 'no') {
        return
      }
      this.$api.getCertificate(this.$route.query.catid, {
        action: 'm_get_bangdan_brand_detail',
        itemid: this.$route.params.itemid
      }).then(data => {
        if (data.data.status == 1) {
          this.applyForm.companyName = data.data.info.gongsi
          this.applyForm.homepage = data.data.info.homepage
          this.applyForm.address = data.data.info.dizhi
          this.applyForm.title = data.data.info.title
          window.sessionStorage.setItem('applyForm', JSON.stringify(this.applyForm))
        } else {
          this.$toast.center(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 判断当月相对应的天数
    judgeDay(year, month) {
      if ([4, 6, 9, 11].indexOf(month) !== -1) {
        this.normalMaxDays = 30 // 小月30天
      } else if (month == 2) {
        if (year) {
          if (
            (year % 4 == 0 &&
              year % 100 != 0) ||
            year % 400 == 0
          ) {
            this.normalMaxDays = 29 // 闰年2月29天
          } else {
            this.normalMaxDays = 28 // 闰年平年28天
          }
        }
        else {
          this.normalMaxDays = 28 // 闰年平年28天
        }
      } else {
        this.normalMaxDays = 31 // 大月31天
      }
      this.generateDayData(month)
    },
    // 获取当前月数
    judgeMonth(y) {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      this.monthDate = []
      if (year == y) {
        for (let i = 1; i <= month; i++) {
          this.monthDate.push(i)
        }
      } else {
        this.monthDate = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      }
    },
    // 获取天数
    generateDayData(m) {
      let date = new Date()
      let month = date.getMonth() + 1
      let day = date.getDate()
      this.dayDate = []
      if (month == m) {
        for (let i = 1; i <= day; i++) {
          this.dayDate.push(i)
        }
      } else {
        for (let i = 1; i <= this.normalMaxDays; i++) {
          this.dayDate.push(i)
        }
      }
    },
    // 切换时间
    onDateChange(result1, result2) {
      this.currentYear = result1.value
      this.currentMonth = result2
      // 获取当前 年或 月  相对应的天数
      this.judgeMonth(this.currentYear)
      // 获取当前月数
      this.judgeDay(result1.value, result2)
    },
    // 选中年月份
    selectionDate() {
      let yearText = this.$refs.datePicker.result[0].value
      let monthText = this.$refs.datePicker.result[1]
      let dayText = this.$refs.datePicker.result[2]
      this.applyForm.founding_time = yearText + '年' + monthText + '月' + dayText + '日'
      this.showPicker = false
    },
    inputName() {
      this.applyForm.faren = nameRule(this.applyForm.faren)
    },
    inputAddress() {
      this.applyForm.address = addressRule(this.applyForm.address)
    },
    inputNum(e) {
      if (e == 'registered') {
        this.applyForm.registered_fund = numRule(this.applyForm.registered_fund)
      }
      if (e == 'fixed') {
        this.applyForm.fixed_assets = numRule(this.applyForm.fixed_assets)
      }
      if (e == 'invent') {
        this.applyForm.invent_patent = numRule(this.applyForm.invent_patent)
      }
      if (e == 'design') {
        this.applyForm.design_patent = numRule(this.applyForm.design_patent)
      }
      if (e == 'practical') {
        this.applyForm.practical_patent = numRule(this.applyForm.practical_patent)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.company-box {
  background: #fff;
  padding: 0.3rem 0.3rem 0 0.3rem;
  h6 {
    font-size: 0.34rem;
    line-height: 0.34rem;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    padding: 0.3rem 0;
  }
  p {
    font-size: 0.24rem;
    line-height: 0.3rem;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 0.26rem;
  }
}
.middle-block {
  margin: 0.2rem 0;
  background: #fff;
  padding: 0 0.3rem;
}
.top-content {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  padding: 0 0.3rem;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  .picker-cancel {
    font-size: 0.3rem;
    color: #999;
  }
  .picker-title {
    font-size: 0.34rem;
    color: #333;
  }
  .picker-ok {
    font-size: 0.3rem;
    color: #bc903a;
  }
}
</style>
<style>
.picker-backdrop {
  position: fixed;
}
</style>

